<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas</title>
  <style>
    body {
      background-color: #000;
    }

    canvas {
      display: block;
      width: 800px;
      height: 800px;
      margin: 70px auto;
      background-color: #ccfc;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="800" height="800"></canvas>

  <script>
    const canvas = document.querySelector('#canvas')

    const ctx = canvas.getContext('2d'); // 获取平面绘制环境

    // 画矩形
    ctx.beginPath()
    ctx.rect(0, 0, 100, 100)
    ctx.strokeStyle = 'red' // 线条颜色
    ctx.lineWidth = 5 // 线条宽度
    ctx.stroke() // 画线条

    // 再画一个矩形
    ctx.beginPath()
    ctx.strokeStyle = 'blue' // 线条颜色
    ctx.lineWidth = 3 // 线条宽度
    ctx.strokeRect(110, 0, 100, 100) // 画线条

    // 画一个叉
    ctx.beginPath()
    ctx.moveTo(300, 0)
    ctx.lineTo(400, 100)
    ctx.stroke()

    ctx.beginPath()
    ctx.moveTo(300, 100)
    ctx.lineTo(400, 0)
    ctx.stroke()

    // 写一个函数 传入两个参数 n(n >= 3)，R, 画出一个 正 n 边形 且每个顶点距离 中心的长度都是 R
    function drawRegularPolygon(n, R = 100) {

      // 保证多边形边数大于等于 3 
      n = n > 2 ? n : 3;

      // 每个顶点相距的角度差
      const deg = 360 / n;

      // 圆心位置 ，第一个顶点位置 ，弧度转化因数 ，半径值
      const [arcX, arcY, rad, r] = [400, 400, Math.PI / 180, R]

      ctx.beginPath()

      ctx.lineWidth = 1 // 线宽

      ctx.arc(arcX, arcY, 2, 0, Math.PI * 2) // 中心点位置
      ctx.fillStyle = 'black'
      ctx.fill()

      ctx.beginPath()
      ctx.arc(arcX, arcY - r, 2, 0, Math.PI * 2) // 第一个顶点位置
      ctx.fill()

      ctx.beginPath()

      // 依次连接其他顶点
      for (let i = 0; i < n; i++) {
        ctx.moveTo(arcX + r * Math.cos((90 - i * deg) * rad), arcY - r * Math.sin((90 - i * deg) * rad))
        ctx.lineTo(arcX + r * Math.cos((90 - (i + 1) * deg) * rad), arcY - r * Math.sin((90 - (i + 1) * deg) *
          rad))
        ctx.stroke()

      }
      ctx.closePath()

    }

    let count = 3

    // 测试 可发现 当边数足够多的时候 正多边形会越来越趋近于圆形
    let timer = setInterval(() => {
      drawRegularPolygon(count, 200)
      count++
    }, 500)

    setTimeout(() => {
      clearInterval(timer)
    }, 5000)

    // 画一个 四分之一扇形
    ctx.beginPath()
    ctx.arc(800, 800, 100, Math.PI * 0.5, Math.PI, true)
    ctx.lineTo(800, 800)
    ctx.fillStyle = 'purple'
    ctx.fill()

    // 加载一张图片
    // const img = new Image()
    // img.src = './1.jpg'
    // img.onload = function () {
    //   ctx.drawImage(img, 600, 0, 200, 100)
    // }

    // 改成promise版本
    // 加载模块
    function loadImg(src) {
      return new Promise(next => {
        const img = new Image()
        img.src = src
        img.onload = function () {
          next(img) // 加载模块
        }
      })
    }

    // 渲染模块
    function drawImg(img) {
      ctx.drawImage(img, 600, 0, 200, 100) // 绘制原始图片
      ctx.drawImage(img, 540, 0, 540, 600, 600, 200, 90, 100) // 裁剪图片
    }

    loadImg('./1.jpg').then(drawImg)
  </script>
</body>

</html>